<script setup lang="ts">
import {onMounted, reactive, ref, watch} from "vue";
import  {type TableData} from "@/components/type/table";
import TableCard from "@/components/TableCard.vue";
const pageConfig = reactive({
  currentPage: 1,
  pageSize: 10
})
const total = ref(0)
const props = defineProps<TableData>()
const searchData = ref({})
const tableData = ref([])
onMounted(() => {
  getList()
})
const handleSizeChange = (val:number) => {
  pageConfig.pageSize = val
  getList()
}
const handleCurrentChange = (val:number) => {
  pageConfig.currentPage = val
  getList()
}

const setSearchData = (data:Object) => {
  searchData.value = {...data}
  getList()
}
const getList = async function () {
  let params = props.isShowPage ? Object.assign(pageConfig, searchData.value): {...searchData.value}
  let data = await props.request(params);
  tableData.value = data.data
  if (props.isShowPage) {
    pageConfig.currentPage = Number(data.pageRes.currentPage)
    pageConfig.pageSize = Number(data.pageRes.pageSize)
    total.value = data.total
  }
}
</script>

<template>
  <TableCard :columns="props.columns" :is-show-search="true" @getList="getList" @setSearchData="setSearchData"></TableCard>
  <div class="table-extra">
    <slot name="table-extra"></slot>
  </div>
  <el-table border :data="tableData" width="90%" max-height="300" :header-cell-style="{backgroundColor: '#fafafa',color:'#000'}">
    <template v-for="(column, index) in props.columns">
      <el-table-column
          v-if="!column?.listHidden"
          :key="index"
          :prop="column.prop"
          :label="column.label"
      >
        <template #default="scope">
          <slot v-if="column.slot" :name="column.prop" :scope="scope" />
        </template>
      </el-table-column>
    </template>

  </el-table>
  <div class="demo-pagination-block" v-if="total > 0">
    <el-pagination
        v-if="isShowPage"
        v-model:currentPage="pageConfig.currentPage"
        v-model:page-size="pageConfig.pageSize"
        :page-sizes="[1, 10, 20, 30]"
        layout="sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped>
.demo-pagination-block {
  margin-top: 30px;
  display: flex;
  justify-content: right;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.table-extra {
  margin: 10px 0;
}
</style>